import { Steps, StepApprovalProps } from '@pxxtech/web';
import { Status } from '@pxxtech/types';
import { Slider, Select, Space, Form } from 'antd';
import { DemoBlock } from 'demos';
import { useMemo, useState } from 'react';

const { Step } = Steps;

function Approval() {
  const [state, setState] = useState({
    count: 3,
    current: 0,
    status: 'processing' as Status,
  });
  const list = useMemo(() => {
    return [...Array(state.count)].map(
      (_, i) =>
        ({
          date: `02-16 16:21`,
          info:
            i === 0
              ? [
                  {
                    name: `审批人姓名1`,
                    comments: '审批意见文本',
                  },
                  { name: `审批人姓名2` },
                  { name: `审批人姓名3` },
                ]
              : [{ name: `审批人姓名` }],
        } as StepApprovalProps),
    );
  }, [state]);
  return (
    <DemoBlock title="审批流">
      <Space align="start">
        <Form
          onValuesChange={(_, v) => setState(v)}
          initialValues={state}
          style={{ width: 250 }}
        >
          <div>{`审批人数：${state.count}；审批进度：${state.current}； `}</div>
          <Form.Item label="审批人数" name="count">
            <Slider min={1} max={5} />
          </Form.Item>
          <Form.Item label="审批进度" name="current">
            <Slider min={0} max={state.count} />
          </Form.Item>
          <Form.Item label="审批状态" name="status">
            <Select
              options={[
                { label: '通过', value: 'success' },
                { label: '驳回', value: 'error' },
                { label: '审核中', value: 'processing' },
              ]}
            />
          </Form.Item>
        </Form>

        <Steps current={state.current} status={state.status}>
          {list.map((item, i) => (
            <Steps.Approval {...item} key={i} />
          ))}
          <Steps.Approval
            role="observer"
            date="02-16 16:21"
            info={[{ name: '抄送人姓名' }]}
          />
        </Steps>
      </Space>
    </DemoBlock>
  );
}

export default () => {
  return (
    <>
      <DemoBlock title="纵向">
        <Steps>
          <Step title="填写机构信息" status="processing" />
          <Step title="签约机构" status="warning" />
          <Step title="关联服务区" status="warning" />
        </Steps>
      </DemoBlock>

      <DemoBlock title="纵向（失败状态）">
        <Steps>
          <Step
            title="填写机构信息"
            status="success"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="签约机构"
            status="success"
            description="完成时间：2020-12-01 12:30"
          />
          <Step
            title="关联服务区"
            status="success"
            description="完成时间：2020-12-01 12:30"
          />
          <Step title="审批失败" status="error" />
        </Steps>
      </DemoBlock>

      <Approval />
    </>
  );
};
